<template>
  <div class="home">
    <el-row type="flex" justify="space-around">
      <el-col :span="16" id="artList">
        <v-article
          :articleList="articleList"
        />
        <div class="block pagination" v-if="total > size">
          <el-pagination
            layout="prev, pager, next"
            :total="total"
            :page-size="size"
            :current-page="currentPage"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-col>

      <el-col :span="6" class="hidden-sm-and-down" id="side">
        <div class="item">
          <v-classify></v-classify>
        </div>
        <div class="item">
          <v-tag></v-tag>
        </div>
        <div class="item">
          <v-friend></v-friend>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import vFriend from "../components/v-friend";
import vTag from "../components/v-tag";
import vClassify from "../components/v-classify";
import vArticle from "../components/v-article";
import request from "../api/article";
export default {
  name: "home",
  data() {
    return {
      // 每页显示条数
      size: 3,
      // 总条目数
      total: 0,
      // 当前页数
      currentPage: 1,
      // 数据列表
      articleList: [],
    };
  },
  components: {
    vFriend,
    vTag,
    vClassify,
    vArticle,
  },
  created() {
    this.getArticleList();
  },
  methods: {
    // 获取文章列表接口
    getArticleList() {
      request.getArticleList(this.currentPage, this.size).then((res) => {
        if (res.data.code != "200") {
          this.$message({
            message: "加载列表页数据失败",
            type: "warning",
          });
          return false;
        }
        this.total = res.data.total;
        this.articleList = res.data.rows;
      });
    },
    // 分页切换事件
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.getArticleList();
    },
  }
};
</script>

<style>
#side .item {
  margin-bottom: 30px;
}
</style>